<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>平台域名统计</title>
    <#include "/header.html">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/chart.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/stats.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/chartStyle.css">
    <script src="${request.contextPath}/statics/plugins/layui/layui.all.js"></script>
    <script src="${request.contextPath}/statics/js/echarts.min.js"></script>
    <style>

        .glyphicon-arrow-up{
            color: red;
        }

        .glyphicon-arrow-down{
            color: #76d471;
        }
        #refreshs{
            position:fixed;
            top: 200px;

            width: 240px;
            border: 1px solid #cccccc;
            border-right: none;
            border-radius:5px 0 0 5px;
            background: #ffffff;
            padding: 10px 5px;
            z-index: 999;
        }
        .arrows{
            position: absolute;
            left: -41px;
            top: 12px;
            width: 40px;
            height: 40px;
            line-height:40px;
            text-align: center;
            border: 1px solid #ffffff;
            background: #62a6f5;
            cursor: pointer;
        }
        .refreshss{
            cursor: pointer;
            background: #62a6f5;
            position: absolute;
            left: -41px;
            top: 50px;
            width: 40px;
            height: 40px;
            line-height:40px;
            text-align: center;
            border: 1px solid #ffffff;
        }
        .refreshsss{
            top: 69px;
        }
        .bootstrap-select{
            width: 100% !important;
        }
        .empty{
            position: absolute;
            top: 40%;
            left: 50%;
            width: 200px;
            text-align: center;
            margin-left: -100px;
            font-size: 30px;
            color: #cccccc;
        }
        .hide{
            display: none;
        }
    </style>
</head>

<body>
<script src="${request.contextPath}/statics/js/common.js"></script>
<script src="${request.contextPath}/statics/js/transData.js"></script>

<div id="refreshs" style="right:0px;">
    <div class="arrows"><span style="color:#ffffff;font-size: 16px;" class="glyphicon glyphicon-arrow-right"></span></div>
    <div class="refreshss" onclick="refresh()"><span style="color:#ffffff;font-size: 16px;" class="glyphicon glyphicon-refresh"></span></div>
    <form class="layui-form" action="">
        <div class="row" style="margin-bottom: 10px;border-top:none; ">
            <div class="col-md-10 col-md-offset-1" >
                <input type="text" class="layui-input" placeholder="请选择时间" autocomplete="off" id="date">
            </div>
        </div>
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <select id="fromSelect"  class="selectpicker" style="width: 100%;"  multiple  title="选择来源" onchange="selectChange()">
                        <option value="0">阅读文章</option>
                        <option value="2">点击相关阅读</option>
                        <option value="5">点击展开全文</option>
                        <option value="6">阅读文档滚动到底部</option>
               </select>
            </div>
        </div>
        <!--<span class="glyphicon glyphicon-refresh" style="font-size: 30px;"></span>-->
    </form>
</div>
<div class="layui-tab-content">
    <div class="row" style="margin-top: 10px;" id="totalBar">
        <div class="col-md-12 ">
            <div id="totalPie" style="width: 100%;height: 560px;"></div>
            <div class="empty hide">暂无信息</div>
        </div>
    </div>
    <div class="row" style="margin-top: 10px;" id="barBox">
        <div class="col-md-4 ">
            <div id="pie1" style="width: 100%;height: 360px;"></div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript">
    var _date = null;
    function selectChange(){
       refresh('refresh');
    }
    $(function(){
        $('.arrows').click(function(){
            if($('#refreshs').css('right')=='0px'){
                $('.arrows span').removeClass('glyphicon-arrow-right').addClass('glyphicon-arrow-left');
                $('#refreshs').animate({
                    right:'-240px'
                })
            }else{
                $('.arrows span').removeClass('glyphicon-arrow-left').addClass('glyphicon-arrow-right');
                $('#refreshs').animate({
                    right:'0px'
                })
            }

        })
        $('#fromSelect').val([0,2,5,6]);
        $('#fromSelect').selectpicker('refresh');
        layui.use(['form','laydate'], function(){
            var form = layui.form;
            var laydate = layui.laydate;
            laydate.render({
                elem: '#date',
                value:new Date(),
                position:'fixed',
                done: function(value, date, endDate){
                    _date =value;
                    refresh()
                }
            });

        });
        refresh()
    })

    function refresh(){
        statsInit(_date);
        getTotalData(_date);
        window.clearInterval(getdata);
        var getdata = window.setInterval(function(){
            if($(window.parent.document).find(".page-tabs-content .active").attr('data-id')!='modules/view/dommain.html'){
                return;
            }
            statsInit(_date);
            getTotalData(_date);
        },1000*60)
    }
    function getTotalData(e) {
        $.ajax({
            type: "POST",
            url: baseURL + "articleStatis/findArticleRecordReadNumTotalPieChart",
            contentType: "application/json",
            data: JSON.stringify({
                dateTime: e,
                eventArr:$("#fromSelect").val()
            }),
            success: function (_data) {
                if(_data.code==0){
                    var isEmpty = true;
                    var emptyArr = {
                        datas:[],
                        title:_data.result[0].title
                    };
                    for(var i=0;i<_data.result[0].datas.length;i++){
                        if(_data.result[0].datas[i].valueStr != '0'){
                            isEmpty = false;
                            emptyArr.datas.push({
                                nameStr:_data.result[0].datas[i].nameStr,
                                valueStr:_data.result[0].datas[i].valueStr
                            });
                        }
                    }
                    // console.log(isEmpty)
                    if(isEmpty){
                        $("#totalPie").siblings('.empty').removeClass('hide');
                        setBar('totalPie',emptyArr);
                    }else{
                        $("#totalPie").siblings('.empty').addClass('hide');
                        setBar('totalPie',emptyArr);
                    }

                }

            }
        })
    }
    function statsInit(e) {
        $('#barBox').html('')
        $('[data-toggle="tooltip"]').tooltip({
            html: true
        });
        $.ajax({
            type: "POST",
            url: baseURL + "articleStatis/findArticleRecordReadNumPieChart",
            contentType: "application/json",
            data: JSON.stringify({
                dateTime: e,
                eventArr:$("#fromSelect").val()
            }),
            success: function (_data) {
                if(_data.code==0){
                    var data = [];
                    _data.result.forEach(function(item){
                        var _datas = []
                        item.datas.forEach(function(items){
                            if(items.valueStr!=0){
                                _datas.push(items)
                            }
                        })

                        if(_datas.length!=0){
                            data.push({
                                title:item.title,
                                datas:_datas
                            })
                        }else{
                            data.push({
                                title:item.title,
                                datas:[]
                            })
                        }
                    })

                    for(var i=0;i<data.length;i++){
                        var _html = '<div class="col-md-6 " style="position:relative">' +
                            '<div id="pie'+i+'" style="width: 100%;height: 450px;"></div>'
                        _html = _html+ (data[i].datas.length!=0?'':'<div class="empty">暂无信息</div>')
                        _html = _html+'</div>';
                        $('#barBox').append(_html);
                        setBar('pie'+i,data[i])
                    }
                }

            }
        })
    }
    function setBar(id,data){
        for(var i=0;i<data.datas.length;i++){
            data.datas[i].name = data.datas[i].nameStr;
            data.datas[i].value = data.datas[i].valueStr;
        }

        if(!document.getElementById(id)){
            return;
        }


        var myChart = echarts.init(document.getElementById(id));
        var option = {
            title : {
                text: data.title,
                x:'center'
            },

            tooltip : {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },
            color:['#c7004c','#2d8cf0','#19be6b', '#ff9900', '#e46cbb', '#9a66e4','#ed3f14','#CC9900','#9999FF','#996600','#009900','#336666','#666600','#9999CC','#CCCC33','#55968f','#b5edba','#d22780','#fab95b'],
            series : [
                {
                    name: '姓名',
                    type: 'pie',
                    radius : '50%',
                    center: ['50%', '50%'],
                    data: data.datas,
                    label: {
                        normal: {
                            formatter: '{b}:{c}({d}%)',
                        }
                    },

                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option,true);
    }
</script>
</html>